S<template>
  <h2>客户销售过程列表</h2>
  <el-table :data="sellJhList" stripe style="width: 100%">
    <template #empty>
    <div class="empty-state">
      <i class="el-icon-data-empty"></i>
      <p>暂无数据</p>
    </div>
  </template>
    <el-table-column prop="id" label="编号" width="180" />S
    <el-table-column prop="custName" label="客户姓名" width="180" />
    <el-table-column prop="channelId" label="销售渠道" >
        <template #default="scope">
    {{ getChannelName(scope.row.channelId)  }}
  </template>
        </el-table-column>
    <el-table-column prop="money" label="销售金额" />
    <el-table-column prop="nowStep" label="销售阶段" />
    <el-table-column prop="empId" label="业务员" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="delSellJh(scope.row)">
         删除
        </el-button>
        <el-button link type="primary" size="small" @click="openSellJhVisible(scope.$index,scope.row)">修改</el-button>
      </template>
    </el-table-column>``
  </el-table>
  <hr/>
  <el-pagination
    size="small"
    background
    layout="prev, pager, next"
    :page-size="3"
    :pager-count="10"
    :total="total"
    class="mt-4"
    @current-change="handlerPageChange"
  />

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="80%"
    
  >
  <h2>修改客户信息</h2>
  <el-form :model="SellJhForm" label-width="120px" >
    <el-form-item label="客户名称">
        <el-select
      v-model="SellJhForm.custName"
      placeholder="请选择客户"
      size="large"
      style="width:80%"
    >
      <el-option
        v-for="item in custList"
        :key="item.id"
        :label="item.custName"
        :value="item.id"
      />
    </el-select>
    </el-form-item>
     <el-form-item label="销售渠道">
        <el-select v-model="SellJhForm.channelId" placeholder="请选择渠道" style="width: 80%">
        <el-option label="自媒体" value="0" />
        <el-option label="网络推广" value="1" />
        <el-option label="老客户介绍" value="2" />
        <el-option label="二次客户" value="3" />
     
      </el-select>
    </el-form-item>
    <el-form-item label="销售金额">
      <el-input v-model="SellJhForm.money" style="width: 80%"/>
    </el-form-item>

    <el-form-item label="开发阶段">
      <el-select v-model="SellJhForm.nowStep" placeholder="请选择" style="width: 80%">
        <el-option label="接触" value="接触" />
        <el-option label="报价" value="报价" />
        <el-option label="签约" value="签约" />
     
      </el-select>
    </el-form-item>
    <el-form-item label="业务员">
      <el-input v-model="SellJhForm.empId"  style="width: 80%" readonly="readonly"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveSellForm">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>

  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
const sellJhList=ref([]);
const total=ref();
const dialogVisible=ref(false);
function ListSellQuery(pageNum){
axios.get("http://localhost:8081/SellJhList?pageNum="+pageNum)
.then(
    (response)=>{sellJhList.value=response.data.sellJhList;

    total.value=response.data.total}
).catch((error)=>{console.log(error);})

}

onMounted(function(){
  ListSellQuery(1);
})
function getChannelName(channelId){
    switch(channelId){
case 0: return "自媒体";
case 1:return "网络推广";
case 2:return "老客户介绍";
case 3:return "二次客户";

    }
}
const SellJhForm=reactive({
custName:'',
channelId:'',
money:0.0,
nowStep:'',
empId:100

})
const custList=ref([]);
function openSellJhVisible(index,row){
    dialogVisible.value=true;
    SellJhForm.custName=row.custName;
    SellJhForm.channelId=row.channelId;
    SellJhForm.money=row.money;
    SellJhForm.nowStep=row.nowStep;
   

axios.get("http://localhost:8081/listAllCust")
.then(
(response)=>{
  console.log(response.data);
custList.value=response.data;
})
.catch(
  (error)=>{
    console.log(error);
  }
)
}
function delSellJh(row){
axios.delete("http://localhost:8081/delSellJh?id="+row.id)
.then(response=>{  if (response.data.code === 200) { // 假设成功响应码为 200
        ElMessage.success(response.data.msg); // 显示成功提示
        ListSellQuery(1); // 重新加载第一页数据
      } else {
        ElMessage.error(response.data.msg);
      }})
.catch( (error)=>{
    console.log(error);
  })

}

</script>

<style scoped>

</style>